<template>
	<div class="list" ref="wrapper">
		<div >
			<div class="area">
				<div class="title border-topbottom">
					当前城市
				</div>
				<div class="button-list">
					<div class="button-wrapper">
						<div class="button"  >
							{{this.city}}
						</div>
					</div>
				</div>
			</div>
			<div class="area">
				<div class="title border-topbottom">
					热门城市
				</div>
				<div class="button-list">
					<div class="button-wrapper" 
						 v-for="item of hotCities" 
						 :key="item.id"
						@click="handleCilckChange(item.name)"
					>
						<div class="button" >{{item.name}}</div>
					</div>
				</div>
			</div>
			<div class="area" 
				v-for="(item,key) of cities" 
				:key="key"
				:ref="key"
				>
				<div class="title border-topbottom">
					{{key}}
				</div>
				<div class="item-list" v-for="innerItem of item" :key="innerItem.id" 	@click="handleCilckChange(innerItem.name)">
					<div class="item border-bottom" >{{innerItem.name}}</div>
				</div>
			</div>
				
		</div>
	</div>
</template>

<script>
import Bscroll from 'better-scroll'
import { mapState , mapMutations} from 'vuex'
export default{
	name:'cityList',
	props:{
		hotCities:Array,
		cities:Object,
		letter:String
	},
	computed: {
		//把vuex 里city这个公用数据 映射到计算属性为city
		...mapState(['city'])
	},
	methods: {
		handleCilckChange (val) {
			//this.$store.dispatch('changeCity',val)
			//this.$store.commit('changeCity',val)
			this.changeCity(val)
			this.$router.push('/')
		},
		//有一个人mutation 叫做changeCity,然后将它映射到一个changeCity的方法
		...mapMutations(['changeCity'])
	},
	watch: {
		letter (){
			if(this.letter){
				const ele=this.$refs[this.letter][0]
				this.scroll.scrollToElement(ele)
			}
		}
	},
	mounted ()　{
		this.scroll=new Bscroll(this.$refs.wrapper,{click:true})
	}
}
</script>

<style lang="stylus" scoped>
	@import "~styles/varibles.styl";
	.border-topbottom
		&:before
			border-color: #ccc
		&:after
			border-color:#ccc
	.list
		position:absolute
		overflow:hidden
		top: 1.74rem
		left: 0
		right: 0
		bottom: 0
		.title
			height:.5rem
			line-height:.5rem
			background:#eee
			color:#666
			padding-left:.2rem
			font-size:.26rem
		.button-list
			padding:.1rem
			overflow:hidden
			.button-wrapper
				float:left
				width:28%
				margin:.1rem
				.button
					padding:.15rem 0
					border:1px solid #ccc
					border-radius:.06rem
					text-align:center
					font-size:.28rem
					z-index:2
		.item-list
			.item
				line-height:.74rem
				padding-left:.2rem
				font-size:.26rem
				border-top:1px solid #ccc
</style>